<template>
	<view class="container">
		<image class="bg-image" src="/static/library-bg.jpg" mode="aspectFill"></image>
		<view class="overlay"></view>
		<view class="main-content">
			<text class="title">自家书库</text>
			<button 
				class="start-btn" 
				:class="{'start-btn-active': isLoading}" 
				@click="handleStart"
				:disabled="isLoading"
			>{{isLoading ? '正在进入...' : '开始'}}</button>
			<view class="register-link" @click="handleRegister">
				<text>还没有账号？</text>
				<text class="register-text">注册</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLoading: false
			}
		},
		onReady() {
			// 页面渲染完成
			console.log('Index page ready');
			// 关闭启动屏幕
			plus.navigator.closeSplashscreen();
		},
		methods: {
			handleStart() {
				// 触发震动反馈
				uni.vibrateShort({
					success: function () {
						console.log('震动成功');
					}
				});
				
				// 显示加载状态
				this.isLoading = true;
				
				// 延迟跳转以显示按钮状态变化
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/login/login'
					});
					this.isLoading = false;
				}, 150);
			},
			handleRegister() {
				uni.navigateTo({
					url: '/pages/register/register'
				});
			}
		}
	}
</script>

<style>
	.container {
		min-height: 100vh;
		background-color: #FFFFFF;
	}

	.bg-image {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 1;
	}

	.overlay {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 2;
	}

	.main-content {
		position: relative;
		z-index: 3;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		padding: 0 30rpx;
		padding-top: 40vh;
	}

	.title {
		color: #FFFFFF;
		font-size: 48rpx;
		font-weight: bold;
		margin-bottom: 60rpx;
	}

	.start-btn {
		width: 80%;
		height: 90rpx;
		line-height: 90rpx;
		background-color: #FF6B00;
		color: #FFFFFF;
		border-radius: 45rpx;
		font-size: 32rpx;
		margin-bottom: 40rpx;
		border: none;
	}

	.register-link {
		display: flex;
		align-items: center;
		color: #FFFFFF;
		font-size: 28rpx;
	}

	.register-text {
		color: #FF6B00;
		margin-left: 10rpx;
	}

	/* 按钮点击效果 */
	.start-btn:active {
		opacity: 0.8;
	}

	.start-btn-active {
		opacity: 0.8;
	}
</style>
